Working with the style sheet

First, see what these styles look like by opening the css_test.html file in a web browser (note that you must use IE 3 or 4, or Netscape 4, and what you see will depend on which browser you use. IE 3.0x, for instance, will not display the borders).

Now that you've seen the initial styles, we'll start experimenting by editing the sample1.css file (note that you may want to save each set of changes in a new file -- such as sample2.css, etc. -- if you do so, remember that you will need to change the href attribute value in the link tag in css_test.html file for each new style sheet to view the results).

Note: you can refer back to the tables of style properties to refresh your memory and check syntax.

Start with some simple changes:

1. change the font color and background color for the H1, H2, and H3 tags
2. change the font size for paragraphs to 12pt

Now view the results in the css_test.html file, using your web browser.

(This next set of changes will only affect the display in IE 4.0 or Netscape 4.0)

1. change the border width for the border elements in the .first and .last classes to thin
2. change the border style for the H1 element to solid

View the results.

Now try adding some new classes:

1. create a class called .highlight -- set the background color to yellow (#FFFF00)
2. create a class called .ufo -- set the font-family to monospace, the size to large, the color to green (#00FF00), and the background to black (#000000)
3. modify the css_test.html file to accomodate these new classes. You can demonstrate them using any tag with a class attribute set the class name (without the initial period) -- example: <div class="ufo">this is the ufo class</div>

View the results.

By now you should have the general idea. Working from the sample, or a new CSS file, start creating some styles of your own. Remember the tables of properties and values that you can use as a reference, and remember that the HTML files you link your style sheets may need to have class attributes added to tags.